﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        html, body { margin: 0; }
    </style>
</head>
<body>
    <div id="block" style="width: 100%; height: 500px;" data-vide-bg="../../video/ocean" data-vide-options="position: 0% 50%"></div>
    <br><br>
    <div id="block2" style="width: 100%; height: 500px;"
         data-vide-bg="mp4: ../../video/ocean, webm: ../../video/ocean, ogv: http://vodkabears.github.io/vide/video/ocean, poster: ../../video/ocean"
         data-vide-options="position: 0% 50%">
    </div>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.vide/jquery.vide.js"></script>
    <script>
        //  $(document).ready(function () {
        //    $('#block').vide('video/ocean'); // Non declarative initialization
        //
        //    var instance = $('#block').data('vide'); // Get the instance
        //    var video = instance.getVideoObject(); // Get the video object
        //    instance.destroy(); // Destroy instance
        //
        //    $('#block2').vide({
        //      'mp4': 'video/ocean',
        //      'webm': 'video/ocean',
        //      'ogv': 'video/ocean',
        //      'poster': 'video/ocean',
        //    });
        //  });
    </script>
</body>
</html>
